<template>
	<view>
		<u-empty v-if="listData.length==0" marginTop='100' mode="data"
			:icon="require('@/static/mine/empty.png')"></u-empty>
		<view v-if="entryStatus==2&&listData.length!=0" style="margin-bottom: 30rpx;" class="start_layout">
			<view class="start_layout" v-for="(item,index) in colorList" :key="index">
				<view :style="{backgroundColor:item.color}" class="circle-box"></view>
				<view class="circle-name">{{ item.name }}</view>
			</view>
		</view>
		<view @click="toPage('/pages_two/project/projectDetail',item.baseId)" v-for="(item,index) in listData"
			:key="index" class="p-area">
			<view v-if="showAuditState||[0,-1,7].includes(entryStatus)" class="entryStatus-area">
				{{item.entryStatus|entryStatusTypeList}}
			</view>
			<view class="between_layout" v-if="entryStatus==2">
				<view style="margin-bottom: 20rpx;" class="state-area start_layout">
					<view :style="{backgroundColor:colorList[item.huanping].bg,color:colorList[item.huanping].color}"
						class="state-item center_layout">环
					</view>
					<view :style="{backgroundColor:colorList[item.anping].bg,color:colorList[item.anping].color}"
						class="state-item center_layout">
						安</view>
					<view :style="{backgroundColor:colorList[item.wenping].bg,color:colorList[item.wenping].color}"
						class="state-item center_layout">稳
					</view>
					<view :style="{backgroundColor:colorList[item.zhiping].bg,color:colorList[item.zhiping].color}"
						class="state-item center_layout">职
					</view>
					<view :style="{backgroundColor:colorList[item.nengping].bg,color:colorList[item.nengping].color}"
						class="state-item center_layout">能
					</view>
				</view>
				<view>
					<u-button :customStyle="{height: '50rpx',borderRadius: '10rpx'}" v-if="item.projectApprove==-1"
						@click.native.stop="toApprove" text="在批申请" type="primary" size="small"></u-button>
					<u-tag plain size="mini" v-if="item.projectApprove==2" @click.native.stop="toApprove" text="在批审核退回"
						type="error"></u-tag>
					<u-tag plain size="mini" v-if="item.projectApprove==1" @click.native.stop="toApprove" text="在批待审核"
						type="warning"></u-tag>
					<u-tag plain size="mini" v-if="item.projectApprove==0" @click.native.stop="toApprove" text="在批审核通过"
						type="success"></u-tag>
				</view>
			</view>
			<view :style="showAuditState||[0,-1,7].includes(entryStatus)?'margin-top: 20rpx':''" class="start_layout">
				<view v-if="showAuditState||[0,-1,7].includes(entryStatus)">
					<view v-if="item.state==0" class="center_layout demo-box" id="demo1">已通过</view>
					<view v-if="item.state==1" class="center_layout demo-box" id="demo2">待审核</view>
					<view v-if="item.state==2" class="center_layout demo-box" id="demo3">已驳回</view>
				</view>
				<view class="p-name">{{item.projectName}}</view>
			</view>
			<view class="type-area start_layout solid-bottom">
				<view class="start_layout type-item">
					<view class="cuIcon-discover type-icon"></view>先进制造业
				</view>
				<view class="start_layout type-item">
					<view class="cuIcon-read type-icon"></view>新材料
				</view>
				<view class="start_layout type-item">
					<view class="cuIcon-circle type-icon"></view>智能装备
				</view>
			</view>
			<view style="margin-top: 20rpx;" class="between_layout">
				<view class="money-area">总投资：{{item.investmentTotal}}万元</view>
				<view v-if="entryStatus==2" class="state-area start_layout">
					<view
						:style="{backgroundColor:colorList[item.ownershipCertificate].bg,color:colorList[item.ownershipCertificate].color}"
						class="state-item center_layout">产</view>
					<view
						:style="{backgroundColor:colorList[item.drawingReviewCertificate].bg,color:colorList[item.drawingReviewCertificate].color}"
						class="state-item center_layout">审</view>
					<view
						:style="{backgroundColor:colorList[item.constructionPermit].bg,color:colorList[item.constructionPermit].color}"
						class="state-item center_layout">施</view>
					<view
						:style="{backgroundColor:colorList[item.recordCertificate].bg,color:colorList[item.recordCertificate].color}"
						class="state-item center_layout">备</view>
					<view
						:style="{backgroundColor:colorList[item.landPlanningPermit].bg,color:colorList[item.landPlanningPermit].color}"
						class="state-item center_layout">地</view>
					<view
						:style="{backgroundColor:colorList[item.engineeringPlanningPermit].bg,color:colorList[item.engineeringPlanningPermit].color}"
						class="state-item center_layout">工</view>
				</view>
				<view v-if="entryStatus==3">
					<u-button :customStyle="{height: '50rpx',borderRadius: '10rpx'}" v-if="item.projectBuild==-1"
						@click.native.stop="toPage('/pages_two/subForm/buildForm',item.baseId)" text="在建申请"
						type="primary" size="small"></u-button>
					<u-tag plain size="mini" v-if="item.projectBuild==2" @click.native.stop="toBuild" text="在建审核退回"
						type="error"></u-tag>
					<u-tag plain size="mini" v-if="item.projectBuild==1" @click.native.stop="toBuild" text="在建待审核"
						type="warning"></u-tag>
					<u-tag plain size="mini" v-if="item.projectBuild==0" @click.native.stop="toBuild" text="在建审核通过"
						type="success"></u-tag>
				</view>
				<view v-if="entryStatus==4">
					<u-button :customStyle="{height: '50rpx',borderRadius: '10rpx'}" v-if="item.projectCompletion==-1"
						@click.native.stop="toPage('/pages_two/subForm/completeForm',item.baseId)" text="竣工申请"
						type="primary" size="small"></u-button>
					<u-tag plain size="mini" v-if="item.projectCompletion==2" @click.native.stop="toCompletion"
						text="竣工审核退回" type="error"></u-tag>
					<u-tag plain size="mini" v-if="item.projectCompletion==1"
						@click="toPage('/pages_two/subForm/completeForm',item.baseId)" text="竣工待审核"
						type="warning"></u-tag>
					<u-tag plain size="mini" v-if="item.projectCompletion==0" @click.native.stop="toCompletion"
						text="竣工审核通过" type="success"></u-tag>
				</view>
				<view v-if="entryStatus==5">
					<u-button :customStyle="{height: '50rpx',borderRadius: '10rpx'}" v-if="item.projectProduction==-1"
						@click.native.stop="toPage('/pages_two/subForm/productionForm',item.baseId)" text="投产申请"
						type="primary" size="small"></u-button>
					<u-tag plain size="mini" v-if="item.projectProduction==2" @click.native.stop="toProduction"
						text="投产审核退回" type="error"></u-tag>
					<u-tag plain size="mini" v-if="item.projectProduction==1" @click.native.stop="toProduction"
						text="投产待审核" type="warning"></u-tag>
					<u-tag plain size="mini" v-if="item.projectProduction==0" @click.native.stop="toProduction"
						text="投产审核通过" type="success"></u-tag>
				</view>
				<view v-if="entryStatus==6">
					<u-button :customStyle="{height: '50rpx',borderRadius: '10rpx'}" v-if="item.projectEfficiency==-1"
						@click.native.stop="toPage('/pages_two/subForm/effectiveForm',item.baseId)" text="达效申请"
						type="primary" size="small"></u-button>
					<u-tag plain size="mini" v-if="item.projectEfficiency==2" @click.native.stop="toEfficiency"
						text="达效审核退回" type="error"></u-tag>
					<u-tag plain size="mini" v-if="item.projectEfficiency==1" @click.native.stop="toEfficiency"
						text="达效待审核" type="warning"></u-tag>
					<u-tag plain size="mini" v-if="item.projectEfficiency==0" @click.native.stop="toEfficiency"
						text="达效审核通过" type="success"></u-tag>
				</view>
				<view class="end_layout" v-if="entryStatus==0&&isChoose">
					<u-button :customStyle="{height: '50rpx',borderRadius: '10rpx'}" @click.native.stop="toChoose(item)"
						text="选择" type="success" size="small"></u-button>
				</view>
				<view class="end_layout" v-if="entryStatus==7">
					<u-button :customStyle="{height: '50rpx',borderRadius: '10rpx'}" style="margin: 0 20rpx;"
						@click.native.stop="toStage(item.baseId)" text="新增分期" type="primary" size="small"></u-button>
					<u-button :customStyle="{height: '50rpx',borderRadius: '10rpx'}"
						@click.native.stop="toPage('/pages_two/stage/stageList',item.baseId)" text="查看分期" type="success"
						size="small"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colorList: {
					'NOT_YET_STARTED': {
						name: '未发起',
						color: '#BBBBBB',
						bg: 'rgb(187,187,187,0.3)'
					},
					'COMPLETED': {
						name: '审批通过',
						color: '#80BE23',
						bg: 'rgb(128,190,35,0.3)'
					},
					'ACTIVE': {
						name: '进行中',
						color: '#1D72E3',
						bg: 'rgb(29,114,227,0.3)'
					}
				}
			}
		},
		props: {
			listData: {
				type: Array,
				default: () => []
			},
			//是否显示审核状态和入库状态
			showAuditState: {
				type: Boolean,
				default: false
			},
			//是否选择项目
			isChoose: {
				type: Boolean,
				default: false
			},
			//当前入库状态，-1为取消库，0为全部，7为项目分期
			entryStatus: {
				type: Number,
				default: null
			},
		},
		methods: {
			toPage(url, id) {
				uni.navigateTo({
					url: url + '?id=' + id
				})
			},
			toChoose(item) {
				this.$emit("choosed", item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.circle-box {
		width: 14px;
		height: 14px;
		border-radius: 50%;
		margin-right: 4px;
	}

	.circle-name {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 14px;
		color: #333333;
		margin-right: 30px;
	}

	.p-area {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		position: relative;

		.entryStatus-area {
			position: absolute;
			right: 0;
			top: 0;
			background: linear-gradient(156deg, #FFB56D 0%, #FF6F0E 100%);
			padding: 6rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			border-radius: 0 10rpx 0 20rpx;
		}

		.state-area {
			.state-item {
				margin-right: 10rpx;
				width: 31rpx;
				height: 31rpx;
				background: rgba(51, 137, 255, 0.12);
				border-radius: 4rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
			}
		}

		.p-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
		}

		.type-area {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			padding: 20rpx 0;

			.type-item {
				margin-right: 40rpx;
			}

			.type-icon {
				color: #3389FF;
				margin-right: 10rpx;
			}
		}

		.money-area {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #3389FF;
			background: rgba(51, 137, 255, 0.1);
			border-radius: 6rpx;
			padding: 9rpx 14rpx;
		}
	}

	.demo-box {
		width: 35px;
		height: 20px;
		position: relative;
		border-radius: 5rpx;
		flex-shrink: 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #FFFFFF;
		margin-right: 20rpx;
	}

	#demo1 {
		background-color: #08B966;
	}

	#demo1:before {
		border: solid transparent;
		content: ' ';
		height: 0;
		left: 100%;
		position: absolute;
		width: 0;
		border-width: 6px;
		border-left-color: #08B966;
		top: 3px;
	}

	#demo3 {
		background-color: #F2270C;
	}

	#demo3:before {
		border: solid transparent;
		content: ' ';
		height: 0;
		left: 100%;
		position: absolute;
		width: 0;
		border-width: 6px;
		border-left-color: #F2270C;
		top: 3px;
	}

	#demo2 {
		background-color: #FD8A19;
	}

	#demo2:before {
		border: solid transparent;
		content: ' ';
		height: 0;
		left: 100%;
		position: absolute;
		width: 0;
		border-width: 6px;
		border-left-color: #FD8A19;
		top: 3px;
	}
</style>